<template>
  <div class="banner" :style="{width:bannerWidth,height:bannerHeight}">
    <swiper ref="mySwiper" :options="swiperOption" v-if="banner&&banner.length >= 1">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in banner" :key="index">
        <a :href="item.link||item">
          <img :src="item.image||item" @load="swiperImageLoad">
        </a>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    banner: { type: Array },
    bannerWidth: { type: String, default: "100%" },
    bannerHeight: { type: String, default: "100%" },
    swiperOption: {
      type: Object,
      default: function() {
        return {
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          pagination: ".swiper-pagination",
          loop: true,
          autoplay: true,
          speed: 600
        };
      }
    }
  },
  data() {
    return {
      isLoad: false //只需要发送一次就好
    };
  },
  computed: {},
  methods: {
    swiperImageLoad() {
      if (!this.isLoad) {
        this.$emit("swiperImageLoad");
        this.isLoad = !this.isLoad;
      }
    }
  }
};
</script>
<style lang="less" scope>
.banner {
  overflow-y: hidden;
}
.swiper-container {
  height: auto !important;
  .swiper-slide {
    a {
      display: block;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    display: inline-block;
    background: #dcdcdc;
    margin: 0px 2px !important;
  }

  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #a5a5a5;
  }

  .swiper-pagination {
    // bottom: 3px!important;
    height: 0.2rem;
    width: 100%;
  }
}
</style>
